<template>
    <main>
        <header>
            <router-link to="/login">登录</router-link>
            <input type="text" placeholder="大家正在搜索 : 护肤套装">
            <router-link to="/type">
                <img src="../assets/images/first/down.png" alt="">
            </router-link>
        </header>
        <nav>
            <div class="list">
                <ul>
                    <li v-for="(item,index) in list">
                        <router-link :to="item.path">{{item.con}}</router-link>
                    </li>
                </ul>
            </div>
            <div class="list1">
                <font-awesome-icon icon="chevron-down" class="icon"/>
            </div>
        </nav> 
        <section>
            <div class='swipe'>
                <mt-swipe :auto="4000">
                <mt-swipe-item v-for="(item,index) in swipe">
                    <img :src="item.src" alt="">
                </mt-swipe-item> 
                </mt-swipe>
            </div>
            <div>
                <img src="../assets/images/first/100.jpg" alt="" style="width:100vw">
            </div>
            <div class="list2">
                <ul>
                    <li v-for="(item,index) in list2">
                        <img :src="item.src" alt="">
                    </li>
                </ul>
            </div>
            <div style="clear: both; position: relative; width:100vw; height:calc(48500vw/ 750)">
                <img src="../assets/images/first/com/1/mst_25a7959e080dcbd724296d5ba3a8dd89_750x485_90.jpg" alt="" style="position:absolute; width:100vw; height:calc(48500vw/ 750);z-index:1">
                <img src="../assets/images/first/com/1/mst_2987ecdb3ed56b37b5b60a0bc56ed62c_750x485_90.png" alt="" style="position:absolute; width:100vw; height:calc(48500vw/ 750);z-index:2">
                <img src="../assets/images/first/com/1/mst_63bd8ec95a3971d3a265766436eedb52_36x36_90.png" alt=""
                style="position:absolute; width:5vw; height:5vw; z-index:3; top:15vw; left:30vw">
                <img src="../assets/images/first/com/1/mst_63bd8ec95a3971d3a265766436eedb52_36x36_90.png" alt=""
                style="position:absolute; width:5vw; height:5vw; z-index:3; top:15vw; left:36vw">
                <img src="../assets/images/first/com/1/mst_63bd8ec95a3971d3a265766436eedb52_36x36_90.png" alt=""
                style="position:absolute; width:5vw; height:5vw; z-index:3; top:15vw; left:42vw">
                <span style="position:absolute; line-height:5vw; z-index:3; top:15vw; left:48vw; font-size:4vw; color:white"><span>82.4</span><span>万人正在逛</span></span>
                 <img src="../assets/images/first/com/1/mst_2790a34f55cd32bbceb5a05ccf9c6282_34x34_90.jpg" alt=""
                style="position:absolute; width:4.5vw; height:4.7vw; z-index:4; top:15.21vw; left:30.25vw; border-radius: 50%">
                <img src="../assets/images/first/com/1/mst_a563c663a5c91e41399f7252910e293e_34x34_90.jpg" alt=""
                style="position:absolute; width:4.5vw; height:4.7vw; z-index:4; top:15.21vw; left:36.25vw; border-radius: 50%">
                <img src="../assets/images/first/com/1/mst_f3ffefdf38ad5c93a5c540f386498973_34x34_90.jpg" alt=""
                style="position:absolute; width:4.5vw; height:4.7vw; z-index:4; top:15.21vw; left:42.25vw; border-radius: 50%">
                <img src="../assets/images/first/com/1/mst_0a1574144b9bddcce979f728902de8d6_228x316_90.png" alt="" style="position:absolute; width:29vw; height:calc(29vw * 316 / 218); z-index:4; top:20vw; left:4.5vw;">
                <img src="../assets/images/first/com/1/mst_2b072690b3bd920237340f6a978bbb2d_228x316_90.png" alt="" style="position:absolute; width:29vw; height:calc(29vw * 316 / 218); z-index:4; top:20vw; left:35.5vw;">
                <img src="../assets/images/first/com/1/mst_672cd3968cbc4334c4fa92097c04f85b_228x316_90.png" alt="" style="position:absolute; width:29vw; height:calc(29vw * 316 / 218); z-index:4; top:20vw; left:66.5vw;">
            </div>
            <div style="clear: both; position: relative;width:100vw; height:calc(38600vw/ 750);">
                <img src="../assets/images/first/com/2/mst_dcb764d2736c347910424c06c08a6e4d_750x386_90.jpg" alt=""
                style="position:absolute; width:100vw; height:calc(38600vw/ 750);">
                <img src="../assets/images/first/com/2/mst_4bed318d37c2eba56067c835d20e3773.gif" alt=""
                style="position:absolute; width:calc(212vw*4/ 58); height:4vw; left:25vw; top:6vw;">
                <span style="position:absolute; line-height:5vw; top:6vw; right:4vw; font-size:3.5vw; color:#808080">精选爆款 已售<span>190</span>+万件</span>
                <ul class="com2">
                    <li v-for="(item,index) in com2">
                        <img :src="item.src" alt="">
                        <div><span>{{item.con}}</span></div>
                        <div><span>{{item.price}}</span></div>
                    </li>
                </ul>
            </div>
            <div style="clear: both; position: relative;width:100vw; height:calc(44600vw/ 750);">
                <img src="../assets/images/first/com/3/mst_7627437ad0cb78e5e9eaa7507d4b33e5_750x446_90.jpg" alt="" style="position:absolute; width:100vw; height:calc(44600vw/ 750);">
                <img src="../assets/images/first/com/3/mst_f470ebea1f89b0ae3ecb28b427054834.gif" alt="" style="position:absolute; width:calc(212vw*4/ 58); height:4vw; left:25vw; top:6.2vw;">
                <span style="position:absolute; line-height:5vw; top:6.5vw; right:4vw; font-size:3.5vw; color:#808080"><span>1000</span>+品牌正在疯抢</span>
                <ul class="com3">
                    <li v-for="(item,index) in com3">
                        <img :src="item.src" alt="">
                        <div><img :src="item.src1" alt="">
                        </div>
                        <div><span>{{item.con}}</span></div>
                    </li>
                </ul>
            </div>
            <div style="clear: both; position: relative;width:100vw; height:calc(34200vw/ 750);">
                <img src="../assets/images/first/com/4/mst_72de5fa3f6b694e571ca57e4d2dc7968_750x342_90.jpg" alt="" style="position:absolute; width:100vw; height:calc(34200vw/ 750);">
                <img src="../assets/images/first/com/4/mst_b4fea3420bd5e5f00e9d62e4af43555f.gif" alt="" style="position:absolute; width:calc(212vw*4/ 58); height:4vw; left:25vw; top:6.3vw;">
                <span style="position:absolute; line-height:5vw; top:6.5vw; right:4vw; font-size:3.5vw; color:#808080">极致性价比好物大搜罗</span>
                <ul class="com4">
                    <li v-for="(item,index) in com4">
                        <img :src="item.src" alt="">
                        <div>
                            <img :src="item.src1" alt="">
                            <span>{{item.con}}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div style="clear:both;position:relative;width:100vw; height:15.333vw">
                <img src="../assets/images/first/1566543733364.jpg" alt="" style="width:100vw; height:15.333vw">
            </div>
            <div style="clear:both;position:relative;">
                <img src="../assets/images/first/com/5/15989255508534_1125x744_90.webp.jpg" alt="" style="position:relative; width:100vw; height:calc(74400vw/ 1125);">
            </div>
            <div style="clear:both;position:relative">
                <div v-for="(item,index) in com5" style="width:100vw;height:calc(21vw + 545*94vw/ 1135);position:relative; background-color:#f3f4f5">
                    <img :src="item.src" alt="" style="width:94vw;height:calc(545*94vw/ 1135) ; position:absolute; left:3vw; border-radius:3vw 3vw 0 0;" >
                    <div style="width:94vw;height:18vw;position:absolute;top:calc(545*94vw/ 1135); left:3vw;background-color:#fff; border-radius:0 0 3vw 3vw;">
                        <div style="position:absolute;height:5vw;top:3vw;left:3vw;width:95%;">
                            <div style="position:absolute;line-height:5vw;width:80%;font-weight:900;white-space:nowrap;text-overflow:ellipsis;overflow:hidden">
                                <span>{{item.con}}</span>
                            </div>
                            <div style="position:absolute;right:0;line-height:4vw;width:20%;">
                                <div style="position:absolute;right:0;">
                                    <span style="font-size:2.5vw;color:#98989f">{{item.day}}</span>
                                </div>
                            </div>
                        </div>
                        <div style="position:absolute;height:4vw;top:11vw;width:95%;left:3vw;">
                            <div :class="item.ico_c">
                                <span style="font-size:2vw;color:white">{{item.ico}}</span>
                            </div>
                            <div style="float:left;line-height:3vw;">
                                <span style="color:#de3d96;font-size:2.5vw">{{item.sales}}</span><span style="color:#585c64;font-size:2.5vw">{{item.msg}}</span>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</template>
<script>
    export default{
        data(){
            return {
                list:[
                    {
                        path:'/',
                        con:'今日推荐'
                    },
                    {
                        path:'/fq',
                        con:'最后疯抢'
                    },
                    {
                        path:'/kq',
                        con:'唯品快抢'
                    },
                    {
                        path:'/qc',
                        con:'品牌清仓'
                    },
                    {
                        path:'/al',
                        con:'唯品奥莱'
                    },
                ],
                swipe:[
                    {
                        src:'./src/assets/images/first/swipe/15989518831983.jpg!85.webp.jpg'
                    },
                    {
                        src:'./src/assets/images/first/swipe/15990105121032.jpg!85.webp.jpg'
                    },
                    {
                        src:'./src/assets/images/first/swipe/15988601686136.jpg!85.webp.jpg'
                    },
                    {
                        src:'./src/assets/images/first/swipe/15989410697058.jpg!85.webp.jpg'
                    },
                    {
                        src:'./src/assets/images/first/swipe/15989528073501.jpg!85.webp.jpg'
                    },
                    {
                        src:'./src/assets/images/first/swipe/15989500717979.jpg!85.webp.jpg'
                    },
                    {
                        src:'./src/assets/images/first/swipe/15989495255053.jpg!85.webp.jpg'
                    }
                ],
                list2:[
                    {
                        src:'./src/assets/images/first/list/15313874158310.jpg'
                    },
                    {
                        src:'./src/assets/images/first/list/15314673389660.jpg'
                    },
                    {
                        src:'./src/assets/images/first/list/15314672351860.jpg'
                    },
                    {
                        src:'./src/assets/images/first/list/15313876743467.jpg'
                    },
                    {
                        src:'./src/assets/images/first/list/15314673173399.jpg'
                    },
                    {
                        src:'./src/assets/images/first/list/15314671150807.jpg'
                    },
                    {
                        src:'./src/assets/images/first/list/15269794028123.jpg'
                    },
                    {
                        src:'./src/assets/images/first/list/15314674690588.jpg'
                    },
                    {
                        src:'./src/assets/images/first/list/15314699074829.jpg'
                    },
                    {
                        src:'./src/assets/images/first/list/15314670636778.jpg'
                    }
                ],
                com2:[
                    {
                        src:'./src/assets/images/first/com/2/d7a52db8-e0be-4e25-a23f-23b7b4b8f462_160x160_90.jpg',
                        con:'雅鹿',
                        price:'￥59起'
                    },
                    {
                        src:'./src/assets/images/first/com/2/c5eef1b7-7361-43c6-9626-26697834e21d_160x160_90.jpg',
                        con:'百家好世',
                        price:'￥55'
                    },
                    {
                        src:'./src/assets/images/first/com/2/fab61ac2-79ab-4893-bb03-fee0dd6f81ea_160x160_90.jpg',
                        con:'AKAW',
                        price:'￥79'
                    },
                    {
                        src:'./src/assets/images/first/com/2/2b1cd5e3-e893-4b2a-8316-2a615b46cda1_160x160_90.jpg',
                        con:'东阿阿胶',
                        price:'￥270'
                    },
                ],
                com3:[
                    {
                        src:'./src/assets/images/first/com/3/ias_159904104409652_218x201_90.jpg',
                        src1:'./src/assets/images/first/com/3/primary_120x60_90.png',
                        con:'共620款'
                    },
                    {
                        src:'./src/assets/images/first/com/3/ias_159901458181963_218x201_90.jpg',
                        src1:'./src/assets/images/first/com/3/primary_120x60_90 (1).png',
                        con:'共2599款'
                    },
                    {
                        src:'./src/assets/images/first/com/3/ias_159903597891229_218x201_90.jpg',
                        src1:'./src/assets/images/first/com/3/primary_120x60_90 (2).png',
                        con:'共1160款'
                    },
                ],
                com4:[
                    {
                        src:'./src/assets/images/first/com/4/02669d88-b063-438b-872a-bdb4f8c4d32e_160x160_90.jpg',
                        src1:'./src/assets/images/first/com/4/mst_5558b7f99f5c672062ef7e96b4e5f84c_160x98_90.png',
                        con:'真维斯',
                        price:'￥45'
                    },
                    {
                        src:'./src/assets/images/first/com/4/f055d522-cc3d-4671-aed1-0073a9ac7d40_160x160_90.jpg',
                        src1:'./src/assets/images/first/com/4/mst_5558b7f99f5c672062ef7e96b4e5f84c_160x98_90.png',
                        con:'李宁',
                        price:'￥79'
                    },
                    {
                        src:'./src/assets/images/first/com/4/ff6937fb-afd9-46ef-b787-027f9aae26bc_160x160_90.jpg',
                        src1:'./src/assets/images/first/com/4/mst_5558b7f99f5c672062ef7e96b4e5f84c_160x98_90.png',
                        con:'笛莎',
                        price:'￥45.9'
                    },
                    {
                        src:'./src/assets/images/first/com/4/cba3e8f3-0661-468b-8df3-b8388f481136_160x160_90.jpg',
                        src1:'./src/assets/images/first/com/4/mst_5558b7f99f5c672062ef7e96b4e5f84c_160x98_90.png',
                        con:'经典泰迪',
                        price:'￥16'
                    },
                ],
                com5:[
                    {
                        src:'./src/assets/images/first/com/5/ias_0fd88b16-3e3d-470e-8e0f-0e49b0a3fcdb_1135x545_85.jpg',
                        con:'安踏ANTA运动鞋服专场',
                        day:'',
                        ico:'',
                        ico_c:'',
                        sales:'3',
                        msg:'折封顶'
                    },
                    {
                        src:'./src/assets/images/first/com/5/ias_159894150823069_1135x545_85.jpg',
                        con:'【赢家集团】珂莱蒂尔女装今日大牌专场',
                        day:'剩2天',
                        ico:'200+款新货',
                        ico_c:'ico',
                        sales:'0.4',
                        msg:'折起'
                    },
                    {
                        src:'./src/assets/images/first/com/5/ias_159834057612525_1135x545_85.jpg',
                        con:'斐乐FILA男女运动&儿童专场',
                        day:'剩2天',
                        ico:'50+款新货',
                        ico_c:'ico',
                        sales:'2.3',
                        msg:'折起'
                    },
                    {
                        src:'./src/assets/images/first/com/5/ias_159903783489788_1135x545_85.jpg',
                        con:'百丽BeLLE&天美意teenmix&思加图staccato-百丽集团专场',
                        day:'剩118天',
                        ico:'50+款新货',
                        ico_c:'ico',
                        sales:'1',
                        msg:'折起'
                    },
                    {
                        src:'./src/assets/images/first/com/5/ias_f5a5d732-e4b2-40b6-be31-986d14f1ed5a_1135x545_85.jpg',
                        con:'丽丽Lily女装专场',
                        day:'',
                        ico:'100+款新货',
                        ico_c:'ico',
                        sales:'1.1',
                        msg:'折起'
                    },
                    {
                        src:'./src/assets/images/first/com/5/ias_159897216914547_1135x545_85.jpg',
                        con:'The History of Whoo今日大牌-化妆品专场',
                        day:'剩2天',
                        ico:'',
                        ico_c:'',
                        sales:'',
                        msg:'一口价'
                    },
                    {
                        src:'./src/assets/images/first/com/5/ias_159894382113996_1135x545_85.jpg',
                        con:'杞年-宁夏好枸杞专场',
                        day:'剩2天',
                        ico:'',
                        ico_c:'',
                        sales:'2.3',
                        msg:'折起'
                    }
                ]
            }
        }
    }
</script>
<style scoped>
    header{
        text-align: center;
        position: relative;
        margin-top:6px;
    }
    header input{
        width: calc(100% - 100px);
        height: 30px;
        background-color: #f3f4f5;
        outline: none;
        border: 1px solid #e2e2e2;
        border-radius: 50px;
        padding: 0 0 0 10px;
        margin-left: 5px;
        font-size: 16px;
    }
    header input::placeholder{
        color: #98989f;
    }
    header a:nth-of-type(1){
        position: absolute;
        left: 10px;
        top:50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: #a0a2a7;
    }
    header a:nth-of-type(2){
        position: absolute;
        right: 10px;
        top:50%;
        transform: translateY(-45%);
    }
    header img{
        width: 25px;
        /* height: 30px; */
    }
    .list{
        float: left;
        width: 90%;
        overflow: scroll;
        font-size: 14px;
    }
    .list::-webkit-scrollbar{
        display: none;
    }
    .list ul{
        width: 200vw;
    }
    .list li{
        float: left;
        margin: 4px 10px 1px;
    }
    .list a{
        display: inline-block;
        color: #777777;
        padding: 0 0 5px 0;
    }
    .list1{
        position: relative;
        float: right;
        width: 10%;
        height: 100%;
        text-align: center;
        line-height: 30px;
    }
    .icon{
        transform: scale(1.2);
        opacity: .6;
    }
    nav:after{
        content:'';
        display: table;
        clear: both;
    }
    nav{
        margin-top: 10px;
    }
    .swipe{
        width: 100vw;
        height: 40vw;
    }
    .swipe img{
        width: 100vw;
        height: 40vw;
    }
    .list2 li{
        float: left;
        width: 20vw;
    }
    .list2{
        width: 100vw;
    }
    .list2 img{
        float: left;
        width: 20vw;
    }
    .com2{
        position: absolute;
        left: 4vw;
        top: 15vw
    }
    .com2 li{
        float: left;
        text-align: center;
        line-height: 6vw;
    }
    .com2>li>div:last-child{
        color: #f03867;
    }
    .com2 img{
        width: 20vw;
        height: 20vw;
        margin: 0 1.5125vw;
        border-radius: 5px;
    }
    .com3{
        position: absolute;
        left: 3.5vw;
        top: 15vw
    }
    .com3 li{
        float: left;
    }
    .com3>li>img{
        width: 28vw;
        height: calc(30vw/1.1);
        margin: 0 1.5vw;
        border-radius: 5px;
    }
    .com3>li>div{
        text-align: center;
    }
    .com3>li>div>img{
        width: 16vw;
        height: 8vw;
        margin-top: 1vw;
    }
    .com3 span{
        color: rgb(235, 36, 126);
    }
    .com4{
        position: absolute;
        left: 4vw;
        top: 15vw
    }
    .com4 li{
        float: left;
    }
    .com4>li>img{
        width: 20vw;
        height: 20vw;
        margin: 0 1.5125vw;
        border-radius: 5px;
    }
    .com4>li>div{
        position: absolute;
        margin: 0 1.5125vw;
    }
    .com4>li>div>img{
        width: 20vw;
        height: 12.25vw;
        position: absolute;
        /* margin-top: 1vw; */
    }
    .com4>li>div>span{
        position: absolute;
        width: 20vw;
        line-height: 4vw;
        text-align: center;
        font-size: 2.5vw;
    }
    .ico{
        width: 16vw;
        height:  4vw ;
        float: left;
        background-image:url('../assets/images/first/com/5/1566810703977.png');background-repeat:no-repeat;
        background-size: calc(4vw*255/48) 4vw ;
        text-align: center;
        line-height:3vw;
        border-radius: 4vw;
        margin-right:1vw;
    }
    
</style>